<script setup lang="ts">
import { ref } from "vue";
import { $singleMsg } from "@plugins/utils/element";

interface PropType {
  isDoc?: boolean; // 是否为文档系统
}

withDefaults(defineProps<PropType>(), {
  isDoc: false,
});

const baseVal = ref<string>("");
const debounceVal = ref<string>("");

const handleInput = (value: string) => {
  $singleMsg({
    message: `内容：${value}`,
    type: "success",
  });
};
</script>

<template>
  <div class="page-container w-full h-full">
    <xt-row>
      <xt-col :xs="24" :md="12" :lg="isDoc ? 12 : 8">
        <xt-card header="基础" class="card-container">
          <xt-input v-model="baseVal" :debounce="0" @input="handleInput" />
        </xt-card>
      </xt-col>

      <xt-col :xs="24" :md="12" :lg="isDoc ? 12 : 8">
        <xt-card header="防抖" class="card-container">
          <xt-input v-model="debounceVal" @input="handleInput" />
        </xt-card>
      </xt-col>
    </xt-row>
  </div>
</template>

<style lang="scss">
.page-container {
  .card-container {
    @apply m-[10px];
  }
}
</style>
